<template>
	<view class="expense-detail">
		<view class="expense-detail-box">
			<view class="top">
				<view class="icon-box">
					<icon-svg icon-class="feiji1"></icon-svg>
				</view>
				<view class="conetnt-box">
						<text>机票费</text>
						<text style="color: #ccc;font-size: 32rpx;">COST50</text>
				</view>
			</view>
			<view class="center">
				<form  class="handFormBox" @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item" v-for="(item, index) in formList" :key="index">
						<view>
							<view v-if="item.title === '出差开始日期' || item.title === '出差结束日期' " class="title">{{item.title}}:</view>
							<view v-else class="title"><text>*</text>{{item.title}}:</view>
							<view>
								<input class="uni-input" v-model="item.value" 
									:name="item.name" :placeholder="item.placeholder" 
								/>
							</view>
						</view>
					</view>
					<view class="footer">
						<view style="width: 100%;">
							<text class="title">附件:</text>
							<view class="accessory-box">
								<text style="text-align: left;color:#ccc;font-size: 32rpx;">(选填)</text>
								<text style="text-align: right;color:#F8A41D;">上传附件</text>
							</view>
						</view>
					</view>
					<view class="op">
						<view class="left-box">
							<icon-svg icon-class="tianjia"></icon-svg>
							<text>再记一笔</text>
						</view>
						<view class="button-box">
							<button form-type="submit">保存</button>
						</view>
					</view>
				</form>
			</view>
		</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			formList:[
				{'title': '预算承担项目','placeholder': '','name': 'input','value': '佛山项目'},
				{'title': '出差开始日期','placeholder': '','name': 'input','value': ''},
				{'title': '出差结束日期','placeholder': '','name': 'input','value': ''},
				{'title': '出差天数','placeholder': '','name': 'input','value': ''},
				{'title': '出差地点','placeholder': '','name': 'input','value': ''},
				{'title': '收支项目','placeholder': '','name': 'input','value': '机票费'},
				{'title': '申请金额','placeholder': '','name': 'input','value': ''},
			]
		};
	},
	methods: {
		formSubmit(e) {
			let money = JSON.stringify(e.detail.value.input);
			uni.navigateTo({
				url: '/pages/add/travelApplyBill/travelApplyBill1?money='+ money
			})
		}
	},
}
</script>


<style lang="scss" scoped>
.expense-detail{
	position: relative;
	// margin-bottom: 280px;
	.expense-detail-box{
		position: absolute;
		top: 40rpx;
		left: 0;
		right: 0;
		.top,.center,.footer{
			margin-top: 40rpx;
			padding:40rpx 20rpx;
			// line-height: 90px;
			// height: 90px;
			background: #fff;
			display: flex;
		}
		.op{
			line-height: 100rpx;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			display: flex;
			.left-box{
				width: 60%;
				text-align: center;
				color:$tc;
				.svg-icon{
					color:$tc;
				}
				text{
					margin-left: 20rpx;
				}
			}
			.button-box{
				width: 40%;
				button{
					 background:$tc;
					 color:#fff;
					 width:100%;
					 height: 100%;
				}
			}
		}
		.top {
			.icon-box{
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 24px;
				border-radius: 50%;
				color: #fff;
				background-color: #F8A41D;
			}
			.conetnt-box{
				margin-left: 20rpx;
				text{
					display:block;
				}
			}
		}
		.center{
			.handFormBox{
				width: 100%;
			 .uni-form-item{
				 padding:10rpx 0;
				 color: #595959;
				 font-size: 34rpx;
				 border-bottom: 1px solid #EEEEEE;
				 .title{
					 padding: 5rpx 0;
					 line-height: 1.5;
					 color: #333333;
					 text{
						 color: red;
					 }
					 // &::before{
						//  content: "*";
						//  color: red;
					 // }
				 }
				// .title::before{
				// 	content: '*';
				// 	color:red;
				// } 
			 }
			}
		}
		.footer{
			margin-bottom: 80px;
			.title{
				color: #ccc;
				font-size: 34rpx;
			}
			.accessory-box{
				margin-top: 20rpx;
				text{
					width: 50%;
					display: inline-block;
				}
			}
		}
	}
}
</style>
